<template>
	<div>
		<el-button type="primary" class="mb-[20px] mt-[20px]" @click="handleZoneAdd">新增邮费专区</el-button>
		<el-table v-loading="zoneLoading" stripe :data="zoneList">
			<el-table-column :formatter="emptyToString" label="配送方式" align="center" prop="emplateType">
				<template slot-scope="scope">
					<span v-if="scope.row.emplateType == 1">包邮</span>
					<span v-if="scope.row.emplateType == 2">不包邮</span>
					<span v-if="scope.row.emplateType == 3">不配送</span>
				</template>
			</el-table-column>

			<el-table-column :formatter="emptyToString" label="地区" align="center" prop="provinceNames" />
			<el-table-column :formatter="emptyToString" label="邮费" align="center" prop="postage" />
			<el-table-column :formatter="emptyToString" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-hasPermi="['system:zone:edit']" type="primary" @click="handleZoneUpdate(scope.row)">编辑</el-button>
					<el-button v-hasPermi="['system:zone:remove']" type="danger" @click="handleZoneDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :title="zoneTitle" :visible.sync="open" width="550px" append-to-body>
			<el-form ref="zoneForm" :model="zoneForm" :rules="zoneRules" label-width="100px">
				<el-form-item label="配送方式:" prop="emplateType">
					<el-select v-model.trim="zoneForm.emplateType" placeholder="请选择配送方式">
						<el-option key="1" value="1" label="包邮"></el-option>
						<el-option key="2" value="2" label="不包邮">不包邮 </el-option>
						<el-option key="3" value="3" label="不配送">不配送 </el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="zoneForm.emplateType == 2" label="邮费:" prop="postage">
					<el-input v-model.trim="zoneForm.postage" style="width: 218px" placeholder="请输入邮费" />
				</el-form-item>
				<el-form-item label="全选:">
					<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
				</el-form-item>
				<el-form-item label="选择地区:">
					<el-checkbox-group ref="province" v-model.trim="zoneForm.provinceNames" @change="handleCheckedCitiesChange">
						<el-checkbox v-for="province in provinceList" :key="province.objId" :label="province.name" :disabled="useredProvince.indexOf(province.objId.toString()) > -1">{{
							province.name
						}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: center">
				<el-button @click="cancelZone">取消</el-button>
				<el-button type="primary" @click="submitZoneForm">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listZone, getZone, delZone, addZone, updateZone, getUseredProvince, getProvince } from '@/api/mall/zone';
export default {
	name: 'TemplateZone',
	props: {
		telId: {
			type: Number,
			default() {
				return null;
			},
		},
	},
	data() {
		return {
			checkAll: false,
			isIndeterminate: false,
			zoneLoading: false,
			zoneList: [],
			//省份
			provinceList: [],
			useredProvince: [],
			open: false,
			zoneTitle: '',
			zoneForm: {
				provinceNames: [],
			},
			// 快递专区表单校验
			zoneRules: {
				emplateType: [{ required: true, message: '配送方式不能为空', trigger: 'blur' }],
				postage: [{ required: true, message: '邮费不能为空', trigger: 'blur' }],
			},
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				type: null,
				title: null,
				content: null,
				tenantId: null,
			},
		};
	},
	created() {
		this.getProvinceList();
	},
	methods: {
		getProvinceList() {
			getProvince().then((response) => {
				this.provinceList = response.data;
			});
		},
		/** 搜索快递专区列表 */
		getZoneList(telId) {
			this.zoneLoading = true;
			if (telId != null) {
				this.queryParams.templateId = telId;
			} else {
				this.queryParams.templateId = this.telId;
			}
			listZone(this.queryParams).then((response) => {
				this.zoneList = response.data.records;
				this.total = response.data.total;
				this.zoneLoading = false;
			});
		},
		handleZoneAdd() {
			this.open = true;
			this.resetZone();
			this.zoneTitle = '邮费专区';
			this.usedProvince();
		},
		handleCheckAllChange(val) {
			this.zoneForm.provinceNames = val ? this.provinceList.map((item) => item.name) : [];
			this.isIndeterminate = false;
		},
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.provinceList.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.provinceList.length;
		},
		usedProvince() {
			getUseredProvince({ id: [this.telId] }).then((response) => {
				this.useredProvince = response.data;
			});
		},
		resetZone() {
			this.zoneForm = {
				emplateType: null,
				provinceNames: [],
			};
			this.resetForm('zoneForm');
		},

		submitZoneForm() {
			let that = this;
			this.$refs['zoneForm'].validate((valid) => {
				if (this.zoneForm.emplateType == 2 && this.zoneForm.postage == '') {
					this.msgError('邮费必填');
				}

				if (that.zoneForm.provinceNames.length < 1) {
					this.msgError('地区必选');
					return;
				}
				if (this.zoneForm.emplateType == 1 || this.zoneForm.emplateType == 3) {
					this.$set(this.zoneForm, 'postage', 0);
				}
				if (this.zoneForm.emplateType == 1 && this.zoneList.length > 0) {
					let have = false;
					this.zoneList.forEach(function (item) {
						if (item.emplateType == 1 && item.id != that.zoneForm.id) {
							that.msgError('已经有一个包邮专区了，可以对包邮专区编辑');
							have = true;
							that.resetZone();
							return;
						}
					});
					if (have) {
						return;
					}
				}

				let ids = [];
				that.zoneForm.provinceNames.forEach(function (item) {
					that.provinceList.forEach(function (pro) {
						if (pro.name == item) {
							ids.push(pro.objId);
						}
					});
				});
				this.zoneForm.provinceIds = ids.join(',');
				this.zoneForm.provinceNames = this.zoneForm.provinceNames.join(',');
				this.zoneForm.templateId = this.telId;
				if (valid) {
					if (this.zoneForm.id != null) {
						updateZone(this.zoneForm).then((response) => {
							this.msgSuccess('编辑成功');
							this.open = false;
							this.getZoneList();
						});
					} else {
						addZone(this.zoneForm).then((response) => {
							this.msgSuccess('新增成功');
							this.open = false;
							this.getZoneList();
						});
					}
				}
			});
		},
		cancelZone() {
			this.open = false;
			this.resetZone();
		},
		/** 编辑按钮操作 */
		handleZoneUpdate(row) {
			this.usedProvince();
			this.resetZone();
			const id = row.id || this.ids;
			getZone(id).then((response) => {
				this.zoneForm = response.data;
				this.zoneForm.emplateType = this.zoneForm.emplateType + '';
				this.zoneForm.provinceNames = response.data.provinceNames.split(',');
				this.open = true;
				this.title = '编辑快递专区';
			});
		},
		/** 删除按钮操作 */
		handleZoneDelete(row) {
			let ids = [row.id || this.ids];
			this.$confirm('是否确认编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delZone(ids);
				})
				.then(() => {
					this.getZoneList();
					this.msgSuccess('删除成功');
				});
		},
	},
};
</script>

<style scoped></style>
